import React from 'react';
import { connect } from 'react-redux'
import {Table, Popover, Form, Badge} from 'antd';
import SearchArea from "components/search-area";
import CostCenterGroupDetailQueryService from 'containers/setting/cost-center-group-detail-query/cost-center-group-detail-query.service'
import {messages} from "share/common";
import ResizeTable from "components/resize-table";

class CostCenterGroupDetailQuery extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false,
      data: [],
      page: 0,
      pagination: {
        total: 0,
      },
      columns: [
        {
          title: messages('setting.key369')/*成本中心组代码*/, dataIndex: 'costCenterGroupCode', render: (text) => {
            return (
              <Popover placement="topLeft" content={text}>{text}</Popover>
            )
          }
        },
        {
          title: messages('setting.key370')/*成本中心组名称*/, dataIndex: 'costCenterGroupName', render: (text) => {
            return (
              <Popover placement="topLeft" content={text}>{text}</Popover>
            )
          }
        },
        {
          title: messages('setting.key2022')/*成本中心组描述*/, dataIndex: 'costCenterGroupDesc', render: (text) => {
            return (
              <Popover placement="topLeft" content={text}>{text}</Popover>
            )
          }
        },
        {
          title: messages('setting.key2023')/*成本中心组状态*/,
          dataIndex: "costCenterGroupStatus",
          render: isEnabled => (
            <Badge status={isEnabled ? 'success' : 'error'}
                   text={isEnabled ? messages("common.status.enable") : messages("common.status.disable")}/>)
        },
        {
          title: messages('setting.key339')/*成本中心项代码*/, dataIndex: 'costCenterItemCode', render: (text) => {
            return (
              <Popover placement="topLeft" content={text}>{text}</Popover>
            )
          }
        },
        {
          title: messages('setting.key342')/*成本中心项名称*/, dataIndex: 'costCenterItemName', render: (text) => {
            return (
              <Popover placement="topLeft" content={text}>{text}</Popover>
            )
          }
        },
        {
          title: messages('setting.key2024')/*成本中心项状态*/,
          dataIndex: "costCenterItemStatus",
          render: isEnabled => (
            <Badge status={isEnabled ? 'success' : 'error'}
                   text={isEnabled ? messages("common.status.enable") : messages("common.status.disable")}/>)
        },
      ],
      record: {
        enable: true,
        name: '',
        appCode: '',
        vendorKey: '',
      },
      visible: false,
      searchForm: [
        {
          type: 'input',
          id: 'costCenterGroupCode',
          label: messages('setting.key369')/*成本中心组代码*/,
        },
        {
          type: 'input',
          id: 'costCenterGroupName',
          label: messages('setting.key370')/*成本中心组名称*/,
        },
        {
          type: 'input',
          id: 'costCenterItemCode',
          label: messages('setting.key2025')/*成本中心项编码*/,
        },
        {
          type: 'input',
          id: 'costCenterItemName',
          label: messages('setting.key342')/*成本中心项名称*/,
        },
      ],
      searchParams: {
        costCenterGroupCode: "",
        costCenterGroupName: "",
        costCenterItemCode: "",
        costCenterItemName: '',
      },
    }
  }


  componentWillMount() {
    this.getTableData();
  }

  //获取映射关系
  getTableData = () => {
    const {page, searchParams} = this.state;
    this.setState({
      loading: true,
    });
    CostCenterGroupDetailQueryService.getCostCenterGroupDetail(searchParams, page).then(res => {
        this.setState({
          data: res.data,
          loading: false,
          pagination: {
            total: Number(res.headers['x-total-count']),
            current: this.state.page + 1,
            onChange: this.onChangePaper,
          }
        })
      }
    ).catch(err => {
      this.setState({
        loading: false,
      });
    })
  };

  //点击分页
  onChangePaper = (page) => {
    if (page - 1 !== this.state.page) {
      this.setState({
          page: page - 1,
        }, () => {
          this.getTableData();
        }
      )
    }
  };

  //点击搜索
  search = (result) => {
    let searchParams = this.state.searchParams;
    searchParams = Object.assign(searchParams, result);
    this.setState({
      page: 0,
      pagination: {
        total: 0,
      },
      searchParams,
    }, () => {
      this.getTableData();
    })
  };

  //点击清空
  clear = () => {
    this.setState({
      page: 0,
      searchParams: {
        departmentGroupCode: "",
        departmentGroupName: "",
        departmentCode: "",
        departmentName: "",
      },
    }, () => {
      this.getTableData();
    })
  };

  render (){
    const {pagination, loading, data, columns, searchForm} = this.state;
    return(
      <div>
        <SearchArea
          searchForm={searchForm}
          submitHandle={this.search}
          clearHandle={this.clear}
        />
        <div style={{margin: "10px 0"}}> {messages('setting.key1589',{arg1:pagination.total})/*共搜索到{arg1}条数据*/}
        </div>
        <ResizeTable
          rowKey='adCode'
          loading={loading}
          dataSource={data}
          columns={columns}
          pagination={pagination}
          size="middle"
          bordered
        />
      </div>
    )
  }
}


CostCenterGroupDetailQuery.contextTypes = {
  router: React.PropTypes.object
};

function mapStateToProps(state) {
  return {
  }
}


export default connect(mapStateToProps)(CostCenterGroupDetailQuery);
